<script lang="ts" setup name="VColorInput">
import type { ColorAttrs, ColorInput } from '../color'
import { Color } from '../color'

const props = defineProps({
  color: {
    type: [String, Object] as PropType<ColorInput>,
    default: '#000000',
  },
})

const emit = defineEmits(['update:color', 'change'])

const formatList = ['hex', 'hsl', 'rgb', 'hsv']

const colorClass = new Color()

const currentFormat = ref(formatList[0])
const currentColor = ref<ColorAttrs>(colorClass.parseColor(props.color))

// function onChangeFormat() {
//   const index = ArrayUtils.findIndex(formatList, (val: string) => val == currentFormat.value)

//   currentFormat.value = formatList[(index + 1) % formatList.length]
// }

watch(
  () => props.color,
  (newVal: ColorInput) => {
    currentColor.value = colorClass.parseColor(toRaw(newVal))
  },
)

function doOnChange(data: any, oldHue?: number): void {
  currentColor.value = colorClass.parseColor(data, oldHue)
  emit('update:color', currentColor.value)
  emit('change', currentColor.value)
}

function onInputChange(source: string) {
  switch (source) {
    case 'hex':
      doOnChange({ hex: currentColor.value.hex, source: 'hex' })
      break
    case 'hsl':
      doOnChange({ hsl: currentColor.value.hsl, source: 'hsl' })
      break
    case 'rgb':
      doOnChange({ rgb: currentColor.value.rgb, source: 'rgb' })
      break
    case 'hsv':
      doOnChange({ hsv: currentColor.value.hsv, source: 'hsv' })
  }
}
</script>

<template>
  <div class="inputs-controls">
    <!-- <button class="formatBtn" @click="onChangeFormat"> -->
    {{ currentFormat }}
    <!-- </button> -->
    <!-- <div class="format-group" v-if="currentFormat === 'hsv'">
      <input
        v-model="currentColor.hsv.h"
        type="number"
        min="0"
        max="360"
        placeholder="h"
        @blur="onInputChange('hsv')"
      />
      <input
        v-model="currentColor.hsv.s"
        type="number"
        min="0"
        max="1"
        placeholder="s"
        @blur="onInputChange('hsv')"
      />
      <input
        v-model="currentColor.hsv.v"
        type="number"
        min="0"
        max="1"
        placeholder="v"
        @blur="onInputChange('hsv')"
      />
    </div>
    <div class="format-group" v-if="currentFormat === 'hsl'">
      <input
        v-model="currentColor.hsl.h"
        type="number"
        min="0"
        max="360"
        placeholder="h"
        @blur="onInputChange('hsl')"
      />
      <input
        v-model="currentColor.hsl.s"
        type="number"
        min="0"
        max="1"
        placeholder="s"
        @blur="onInputChange('hsl')"
      />
      <input
        v-model="currentColor.hsl.l"
        type="number"
        min="0"
        max="1"
        placeholder="l"
        @blur="onInputChange('hsl')"
      />
    </div>
    <div class="format-group" v-if="currentFormat === 'rgb'">
      <input
        v-model="currentColor.rgb.r"
        type="number"
        min="0"
        max="255"
        placeholder="r"
        @blur="onInputChange('rgb')"
      />
      <input
        v-model="currentColor.rgb.g"
        type="number"
        min="0"
        max="255"
        placeholder="g"
        @blur="onInputChange('rgb')"
      />
      <input
        v-model="currentColor.rgb.b"
        type="number"
        min="0"
        max="255"
        @blur="onInputChange('rgb')"
        placeholder="b"
      />
    </div> -->
    <div v-if="currentFormat === 'hex'" class="format-group">
      <input v-model="currentColor.hex" type="text" maxlength="7" placeholder="hex" @blur="onInputChange('hex')">
    </div>
  </div>
</template>

<style lang="less" scoped>
.inputs-controls {
  display: flex;
  font-size: 16px;
  margin-bottom: 5px;

  .formatBtn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
    border: 0;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    font-weight: 700;
    outline: none;
    margin-right: 5px;

    &:hover {
      color: #1a3aff;
    }
  }

  .format-group {
    display: flex;
    flex-grow: 1;

    input {
      padding: 5px;
      margin: 0 3px;
      min-width: 0;
      text-align: center;
      border-width: 0 0 1px 0;
      -webkit-appearance: none;
      appearance: none;
      -moz-appearance: textfield;
      outline: none;
      flex: 1;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
      }
    }
  }
}
</style>
